<template>
	<view class="privacy-test">
		<view class="header">
			<text class="title">隐私协议测试页面</text>
		</view>
		
		<view class="content">
			<view class="section">
				<text class="section-title">当前隐私协议状态</text>
				<text class="status-text">状态: {{ privacyStatus }}</text>
			</view>
			
			<view class="section">
				<text class="section-title">测试操作</text>
				<button @click="testPrivacyPopup" class="test-btn">测试隐私协议弹窗</button>
				<button @click="clearPrivacyStatus" class="test-btn">清除隐私协议状态</button>
				<button @click="checkPrivacyStatus" class="test-btn">检查隐私协议状态</button>
			</view>
			
			<view class="section">
				<text class="section-title">说明</text>
				<text class="desc-text">
					1. 点击"测试隐私协议弹窗"可以手动触发隐私协议弹窗\n
					2. 点击"清除隐私协议状态"可以清除已保存的隐私协议状态\n
					3. 点击"检查隐私协议状态"可以查看当前状态\n
					4. 隐私协议弹窗必须勾选同意才能继续使用
				</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			privacyStatus: '未知'
		}
	},
	onLoad() {
		this.checkPrivacyStatus()
	},
	methods: {
		async testPrivacyPopup() {
			try {
				const agreed = await this.$privacy.show(this)
				console.log('隐私协议测试结果:', agreed)
				this.checkPrivacyStatus()
			} catch (e) {
				console.error('隐私协议测试失败:', e)
				uni.showToast({
					title: '测试失败',
					icon: 'none'
				})
			}
		},
		clearPrivacyStatus() {
			uni.removeStorageSync('privacyAgreed')
			this.checkPrivacyStatus()
			uni.showToast({
				title: '已清除状态',
				icon: 'success'
			})
		},
		checkPrivacyStatus() {
			const status = uni.getStorageSync('privacyAgreed')
			this.privacyStatus = status || '未设置'
			console.log('当前隐私协议状态:', status)
		}
	}
}
</script>

<style lang="scss" scoped>
.privacy-test {
	padding: 20px;
	background: #f5f5f5;
	min-height: 100vh;
}

.header {
	text-align: center;
	margin-bottom: 30px;
	
	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
	}
}

.content {
	background: #fff;
	border-radius: 10px;
	padding: 20px;
}

.section {
	margin-bottom: 30px;
	
	.section-title {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		margin-bottom: 15px;
		display: block;
	}
	
	.status-text {
		font-size: 16px;
		color: #666;
		display: block;
	}
	
	.desc-text {
		font-size: 14px;
		color: #999;
		line-height: 1.6;
		display: block;
	}
}

.test-btn {
	width: 100%;
	height: 44px;
	background: #007AFF;
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	margin-bottom: 15px;
	
	&:active {
		background: #0056b3;
	}
}
</style> 